<template>
  <div class="page_footer_warp">
    <ul class="page_footer_ul">
      <li v-for="item of tabBarList" :key="item.id" class="page_footer_li" @click="changeTabBar(item.id)">
        <div v-if="defaultIndex===item.id" class="page_footer_item_warp">
          <img class="footer_item_img" :src="item.activeIcon" alt="">
          <div class="footer_item_name_active">{{ item.name }}</div>
        </div>
        <div v-else class="page_footer_item_warp">
          <img class="footer_item_img" :src="item.defaultIcon" alt="">
          <div class="footer_item_name">{{ item.name }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FooterPage',
  components: {},
  data() {
    return {
      defaultIndex: 0, // 选中的索引值
      tabBarList: [
        {
          id: 0,
          defaultIcon: require('../assets/icon/home.png'),
          activeIcon: require('../assets/icon/home_active.png'),
          name: '房价排名',
        },
        {
          id: 1,
          defaultIcon: require('../assets/icon/trend.png'),
          activeIcon: require('../assets/icon/trend_active.png'),
          name: '房价走势',
        },
        {
          id: 2,
          defaultIcon: require('../assets/icon/mySelf.png'),
          activeIcon: require('../assets/icon/mySelf_active.png'),
          name: '我的',
        },
      ],
    }
  },
  computed: {},
  create() {
  },
  mounted() {
    const currentRouteName = this.$route.name.toString()
    // 因为每次跳转都会刷新，所以重新赋值一次
    switch (currentRouteName) {
      case 'home':
        this.defaultIndex = 0
        break
      case 'trend':
        this.defaultIndex = 1
        break
      case 'mySelf':
        this.defaultIndex = 2
        break
      default:
        this.defaultIndex = 0
        break
    }
  },
  methods: {
    /** 路由跳转 **/
    changeTabBar(id) {
      if (this.defaultIndex === id) {
        console.log('禁止跳转')
      } else {
        this.defaultIndex = id
        switch (id) {
          case 0:
            this.$router.push({ name: 'home' })
            break
          case 1:
            this.$router.push({ name: 'trend' })
            break
          case 2:
            this.$router.push({ name: 'mySelf' })
            break
          default:
            this.$router.push({ name: 'home' })
            break
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
@import "../assets/style/base";
.page_footer_warp{
  width: 100%;
  height: pxTorem(98px);
  border-top: 1px solid #999999;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  .page_footer_ul{
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    .page_footer_li{
      flex: 1;
      .page_footer_item_warp{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: pxTorem(14px);
        .footer_item_img{
          width: pxTorem(48px);
          height: pxTorem(48px);
          margin-bottom: pxTorem(4px);
        }
        .footer_item_name{
          color: #8a8a8a;
        }
        .footer_item_name_active{
          color: #1296db;
        }
      }

    }
  }
}
  .active{
    color: salmon;
  }
</style>
